<template>
  <div>
        <div class="opt-area-02">
          <div class="left-con" style="margin-bottom: 5px">
            备案数:{{params.totalRecord}}
          </div>
          <div class="left-con">
            <div class="input-frame" style="width: 164px">
              <Input type="text" placeholder="同行人姓名" style="width: 164px" v-model="params.passenger_name"/>
            </div>
            <div class="input-frame" style="width: 164px">
              <Input type="text" placeholder="同行人身份证号" style="width: 164px" v-model="params.passenger_cardno"/>
            </div>
            <div class="input-frame" style="width: 164px">
              <Input type="text" placeholder="同行人联系方式" style="width: 164px" v-model="params.passenger_tel"/>
            </div>
            <div class="input-frame" style="width: 164px">
              <Input type="text" placeholder="车牌号" style="width: 164px" v-model="params.car_number"/>
            </div>
            <div class="input-frame" style="width: 164px">
              <Input type="text" placeholder="备案编号" style="width: 164px" v-model="params.register_code"/>
            </div>
            <Button type="primary" @click="findTableT">查询</Button>
          </div>
          <div class="left-con" style="margin-top: 5px">
            <div class="input-frame" style="width: 164px">
              <Select v-model="params.arrive_type_one" style="width:164px" placeholder="备案类型">
                <Option value="">全部</Option>
                <Option value="1">出锦</Option>
                <Option value="2">入锦</Option>
              </Select>
            </div>
            <div class="input-frame" style="width: 164px">
              <Select v-model="params.arrive_type_two" style="width:164px" placeholder="入锦类型">
                <Option value="">全部</Option>
                <Option value="1">返锦</Option>
                <Option value="2">来锦</Option>
              </Select>
            </div>
            <div class="input-frame" style="width: 164px">
              <Select v-model="params.cz_type" style="width:164px" placeholder="社区处置类型">
                <Option value="">全部</Option>
                <Option value="1">社区已处置</Option>
                <Option value="2">社区未处置</Option>
<!--                <Option value="3">区防指已处置</Option>-->
<!--                <Option value="4">区防指未处置</Option>-->
              </Select>
            </div>
            <!-- <div v-show="String(severUserInfo.company_grade) != '4'" class="input-frame" style="width: 164px">
              <Select v-model="params.dsq" style="width:164px" placeholder="到锦区" >
                <Option v-for="item in columns" :value="item.code" :key="item.value">{{ item.name }}</Option>
              </Select>
            </div> -->
            <div class="input-frame" style="width: 164px">
              <Select v-model="params.type" style="width:164px" placeholder="备案状态">
                <Option value="">全部</Option>
                <Option value="0">未审核</Option>
                <Option value="1">审核成功放行</Option>
                <Option value="2">审核成功不放行</Option>
<!--                <Option value="3">审核成功隔离</Option>-->
                <Option value="99">备案已经作废</Option>
              </Select>
            </div>
          </div>
          <div class="left-con" style="margin-top: 5px">
            <div class="input-frame" style="width: 164px">
              <DatePicker type="daterange" format="yyyy/MM/dd" transfer="" placeholder="核验时间"
                          placement="bottom-end" v-model="applytime"></DatePicker>
            </div>
          </div>
        </div>
        <Table border :columns="tableColumns" :data="tableData">
          <template slot-scope="{ row, index }" slot="arrive_type_one">
            <span v-if="row.arrive_type_one === '1'">出锦</span>
            <span v-if="row.arrive_type_one === '2'">入锦</span>
          </template>
          <template slot-scope="{ row, index }" slot="arrive_type_two">
            <span v-show="row.arrive_type_two === '1'">返锦</span>
            <span v-show="row.arrive_type_two === '2'">来锦</span>
          </template>
          <template slot-scope="{ row, index }" slot="sq">
            <div>
              {{getSqCont(row)}}
            </div>
          </template>
          <template slot-scope="{ row, index }" slot="community_cz">
            <div v-show="row.community_type">
              <span v-show="row.community_type">已处置</span>
              <span v-show="!row.community_type">未处置</span>
            </div>
          </template>
          <template slot-scope="{ row, index }" slot="qfz_cz">
            <div v-show="row.is_dzwl==='否'">
              <span v-show="row.qfz_cz">已处置</span>
              <span v-show="!row.qfz_cz">未处置</span>
            </div>
          </template>
          <template slot-scope="{ row, index }" slot="type">
            <span v-show="row.type === '0'">未审核</span>
            <span v-show="row.type === '1'">审核成功放行</span>
            <span v-show="row.type === '2'">审核成功不放行</span>
<!--            <span v-show="row.type === '3'">审核成功隔离</span>-->
            <span v-show="row.type === '99'">备案已作废</span>
          </template>
          <template slot-scope="{ row, index }" slot="action">
            <Button v-if="!row.community_type && severUserInfo.company_grade == '5'" type="primary" size="small" style="margin-right: 5px" @click="qfzchuzhi(row)">处置</Button>
            <Button type="primary" size="small" style="margin-right: 5px" @click="showDetail(row)">详情</Button>
            <!--      <Dropdown>-->
            <!--        <a href="javascript:void(0)">-->
            <!--          告警处置-->
            <!--          <Icon type="ios-arrow-down"></Icon>-->
            <!--        </a>-->
            <!--        <DropdownMenu slot="list">-->
            <!--          <DropdownItem>风险车辆告警处置</DropdownItem>-->
            <!--          <DropdownItem>未消杀车辆告警处置</DropdownItem>-->
            <!--          <DropdownItem>核酸检测告警处置</DropdownItem>-->
            <!--          <DropdownItem>疫苗接种告警处置</DropdownItem>-->
            <!--          <DropdownItem>非从业人告警处置</DropdownItem>-->
            <!--        </DropdownMenu>-->
            <!--      </Dropdown>-->
            <div v-show="severUserInfo.company_grade === '4'">
              <Button v-show="row.is_dzwl === '是' && row.community_cz" type="success" class="actionBtn" size="small" @click="communityClick(row)">查看社区处置</Button>
              <Button v-show="row.is_dzwl === '否' && (!row.qfz_cz)" type="warning" class="actionBtn" size="small" @click="qfzchuzhi(row)">处置</Button>
              <Button v-show="row.is_dzwl === '否' && (row.qfz_cz)" type="success" class="actionBtn" size="small" @click="ckqfzchuzhi(row)">查看处置</Button>
            </div>
            <div v-show="severUserInfo.company_code === 'LJ'">
              <Button type="warning" class="actionBtn" size="small" v-show="String(row.quguo_high_risk) === '2' && !row.jtj_fxclcz" @click="chuzhi(row,0)">风险车辆告警处置</Button>
<!--              <Button type="warning" class="actionBtn" size="small" v-show="(row.disinfection_time === '' || row.disinfection_time === undefined)  && String(row.car_is_ll)=== '1' && !row.jtj_wxsclcz" @click="chuzhi(row,1)">未消杀车辆告警处置</Button>-->
              <Button type="warning" class="actionBtn" size="small" v-show="String(row.hesuan_result) === '阳性' && !row.jtj_hscz" @click="chuzhi(row,2)">核酸检测告警处置</Button>
              <Button type="warning" class="actionBtn" size="small" v-show="String(row.is_ym) === '否' && !row.jtj_ymcz" @click="chuzhi(row,3)">疫苗接种告警处置</Button>
              <Button type="warning" class="actionBtn" size="small" v-show="String(row.cy_result) === '否' && !row.jtj_fcyrycz" @click="chuzhi(row,4)">非从业人告警处置</Button>
              <Button type="success" class="actionBtn" size="small" v-show="row.jtj_fxclcz" @click="showChuZhi(row,0)">查看风险车辆告警处置</Button>
<!--              <Button type="success" class="actionBtn" size="small" v-show="row.jtj_wxsclcz" @click="showChuZhi(row,1)">查看未消杀车辆告警处置</Button>-->
              <Button type="success" class="actionBtn" size="small" v-show="row.jtj_hscz" @click="showChuZhi(row,2)">查看核酸检测告警处置</Button>
              <Button type="success" class="actionBtn" size="small" v-show="row.jtj_ymcz" @click="showChuZhi(row,3)">查看疫苗接种告警处置</Button>
              <Button type="success" class="actionBtn" size="small" v-show="row.jtj_fcyrycz" @click="showChuZhi(row,4)">查看非从业人告警处置</Button>
            </div>
          </template>
        </Table>
        <Row type="flex" justify="end" class="page_style">
          <Page :current="params.pageNo" :total="params.totalRecord" show-sizer :page-size="params.pageSize" show-elevator
                @on-change="pageAction" @on-page-size-change="pageSizeChange"/>
        </Row>
        <record-detail ref="recordDetail"></record-detail>
        <Modal
          v-model="qfzinfo.qfzmodal"
          title="区防指处置"
          @on-ok="qfzchuzhiOk">
          <Form  :label-width="80">
            <FormItem label="处置类型：">
              <Select v-model="qfzinfo.qfz_cz_type">
                <Option value="1">居家健康监测</Option>
                <Option value="2">离锦</Option>
                <Option value="3">其他</Option>
              </Select>
            </FormItem>
            <FormItem label="处置内容：">
              <Input type="textarea" v-model="qfzinfo.qfzchuzhi" placeholder="请出入处置内容"></Input>
            </FormItem>
          </Form>
        </Modal>
        <Modal
          v-model="chuzhiShow"
          :title="chuzhiTitle"
          @on-ok="chuzhiOk"
          @on-cancel="chuzhiShow = false">
          <Form  :label-width="80">
            <FormItem label="处置内容：">
              <Input type="textarea" v-model="chuzhiInfo2" placeholder="请出入处置内容"></Input>
            </FormItem>
          </Form>
        </Modal>
        <Modal
          v-model="chuzhiShow2"
          :title="chuzhiTitle"
          @on-ok="chuzhiShow2 = false"
          @on-cancel="chuzhiShow2 = false">
          <Form  :label-width="80">
            <FormItem label="处置内容：">
              <Input type="textarea" v-model="chuzhiInfo2" disabled></Input>
            </FormItem>
          </Form>
        </Modal>
        <Modal
          v-model="communityModal"
          title="社区处置详情">
          <Form :model="carInfo" :label-width="120">
            <FormItem label="处置类型：">
              <Select v-model="carInfo.community_type">
                <Option value="1">居家健康监测</Option>
                <Option value="2">离锦</Option>
                <Option value="3">其他</Option>
              </Select>
            </FormItem>
            <FormItem label="社区：">
              <Input type="textarea" v-model="carInfo.community_company_name"></Input>
            </FormItem>
            <FormItem label="社区处置人：">
              <Input type="textarea" v-model="carInfo.community_login_name"></Input>
            </FormItem>
            <FormItem label="处置内容：">
              <Input type="textarea" v-model="carInfo.community_cz" placeholder="请出入处置内容"></Input>
            </FormItem>
          </Form>
        </Modal>
      </div>
</template>

<script>
import {
  date2str,
  findPeopelPeerList,
  getCargoTransportationAll, updateJtjPeerCz, updateCarGoPeerCz
} from '../../api/eventlist'
import RecordDetail from '../record_detail'

export default {
  name: 'index',
  components: {
    RecordDetail // 详情
  },
  data () {
    return {
      applytime: [],
      communityModal: false,
      qfzinfo: {
        qfzmodal: false,
        qfzchuzhi: '',
        qfz_cz_type: '',
        info: {}
      },
      severUserInfo: {},
      chuzhiButton: [
        {
          lable: '风险车辆告警处置',
          param: 'jtj_fxclcz'
        },
        {
          lable: '未消杀车辆告警处置',
          param: 'jtj_wxsclcz'
        },
        {
          lable: '核酸检测告警处置',
          param: 'jtj_hscz'
        },
        {
          lable: '疫苗接种告警处置',
          param: 'jtj_ymcz'
        },
        {
          lable: '非从业人告警处置',
          param: 'jtj_fcyrycz'
        }
      ],
      chuzhiShow: false,
      chuzhiShow2: false,
      chuzhiType: '',
      chuzhiTitle: '',
      chuzhiInfo: {},
      chuzhiInfo2: '',
      tableColumns: [
        {
          title: '备案编号',
          key: 'register_code',
          width: '200',
          align: 'center'
        },
        {
          title: '同行人姓名',
          key: 'passenger_name',
          width: '100',
          align: 'center'
        },
        {
          title: '同行人身份证号',
          key: 'passenger_cardno',
          width: '200',
          align: 'center'
        },
        {
          title: '同行人联系方式',
          key: 'passenger_tel',
          width: '150',
          align: 'center'
        },
        {
          title: '车牌号',
          key: 'car_number',
          width: '100',
          align: 'center'
        },
        {
          title: '备案时间',
          key: 'create_time',
          width: '200',
          align: 'center'
        },
        {
          title: '备案类型',
          width: 90,
          slot: 'arrive_type_one',
          align: 'center'
        },
        {
          title: '入锦类型',
          width: 90,
          slot: 'arrive_type_two',
          align: 'center'
        },
        {
          title: '备案状态',
          width: 90,
          slot: 'type',
          align: 'center'
        },
        // {
        //   title: '是否匹配到社区',
        //   width: 90,
        //   key: 'is_dzwl',
        //   align: 'center'
        // },
        {
          title: '所在社区',
          width: 90,
          slot: 'sq',
          align: 'center'
        },
        {
          title: '社区处置',
          width: 90,
          slot: 'community_cz',
          align: 'center'
        },
        // {
        //   title: '区防指处置',
        //   width: 90,
        //   slot: 'qfz_cz',
        //   align: 'center'
        // },
        {
          title: '操作',
          width: 300,
          slot: 'action',
          fixed: 'right',
          align: 'center'
        }
      ],
      tableData: [],
      params: {
        pageNo: 1,
        pageSize: 10,
        totalRecord: 0,
        driver_name: '',
        driver_cardno: '',
        driver_tel: '',
        car_number: '',
        arrive_type_one: '',
        arrive_type_two: '',
        cz_type: '',
        register_code: ''
      },
      columns: [
        {
          'code': 'LM00001',
          'name': '市辖区'
        },
        {
          'code': 'LM00002',
          'name': '古塔区'
        },
        {
          'code': 'LM00003',
          'name': '凌河区'
        },
        {
          'code': 'LM00004',
          'name': '太和区'
        },
        {
          'code': 'LM00005',
          'name': '黑山县'
        },
        {
          'code': 'LM00006',
          'name': '义县'
        },
        {
          'code': 'LM00007',
          'name': '凌海市'
        },
        {
          'code': 'LM00008',
          'name': '北镇市'
        }
      ],
      carInfo: {}
    }
  },
  methods: {
    getSqCont (row) {
      let js = ''
      let str = ''
      if (row.qh_json) js = JSON.parse(row.qh_json)
      if (js.qu_name) str += js.qu_name
      if (js.street_name) str += ('/' + js.street_name)
      if (js.community_name) str += ('/' + js.community_name)
      return str
    },
    communityClick (e) {
      this.carInfo = e
      this.communityModal = true
    },
    qfzchuzhi (e) {
      this.qfzinfo.info = e
      this.qfzinfo.qfzmodal = true
      this.qfzinfo.qfzchuzhi = ''
    },
    ckqfzchuzhi (e) {
      this.qfzinfo.info = e
      this.qfzinfo.qfzmodal = true
      this.qfzinfo.qfzchuzhi = e.qfz_cz
      this.qfzinfo.qfz_cz_type = e.qfz_cz_type
    },
    qfzchuzhiOk () {
      let data = {
        register_code: this.qfzinfo.info.register_code,
        community_cz: this.qfzinfo.qfzchuzhi,
        community_type: this.qfzinfo.qfz_cz_type
      }
      updateCarGoPeerCz(data).then(ret => {
        if (ret.data.errcode === 0) {
          this.$Message.success('处置成功')
          this.findTable()
        } else {
          this.$Message.error({
            content: '操作失败,\n' + ret.data.errmsg
          })
        }
      })
    },
    pageAction (page) {
      this.params.pageNo = page
      this.findTable()
    },
    pageSizeChange (e) {
      this.params.pageSize = e
      this.findTable(this.params.pageNo)
    },
    findTableT () {
      this.params.pageNo = 1
      this.findTable()
    },
    findTable () {
      if (this.applytime.length > 0) {
        this.params.start_time = date2str(this.applytime[0])
        this.params.end_time = date2str(this.applytime[1])
      }
      let data = this.params
      console.log(data)
      findPeopelPeerList(data).then(ret => {
        let data = ret.data
        if (data.errcode === 0) {
          let data1 = data.data.results
          data1.forEach(function (temp) {
            if (temp.is_dzwl_json) {
              temp.sq = JSON.parse(temp.is_dzwl_json)[0].dq + JSON.parse(temp.is_dzwl_json)[0].jd + JSON.parse(temp.is_dzwl_json)[0].sq
            }
          })
          this.tableData = data1
          this.params.totalRecord = data.data.totalRecord
        } else {
          this.error(data)
        }
      })
    },
    showDetail (e) {
      let row = []
      getCargoTransportationAll(e).then(ret => {
        let data = ret.data
        if (data.errcode === 0) {
          row = data.data.results
          this.$refs.recordDetail.init(row[0])
        } else {
          this.error(data)
        }
      })
    },
    error (data) {
      this.$Message.error({
        content: '操作失败,\n' + data.errmsg
      })
    },
    chuzhi (item, type) {
      this.chuzhiInfo2 = ''
      this.chuzhiTitle = this.chuzhiButton[type].lable
      this.chuzhiType = type
      this.chuzhiShow = true
      this.chuzhiInfo = item
    },
    showChuZhi (item, type) {
      this.chuzhiInfo2 = item[this.chuzhiButton[type].param]
      this.chuzhiTitle = '查看' + this.chuzhiButton[type].lable
      this.chuzhiType = type
      this.chuzhiShow2 = true
      this.chuzhiInfo = item
    },
    chuzhiOk () {
      if (!this.chuzhiInfo2) {
        this.$Message.error({
          content: '请填写处置内容'
        })
        return
      }
      let chuzhi = this.chuzhiButton[this.chuzhiType].param
      let param = {
        id: this.chuzhiInfo.id,
        jtj_cz_type: this.chuzhiType
      }
      param[chuzhi] = this.chuzhiInfo2
      console.log(param)
      updateJtjPeerCz(param).then(res => {
        if (res.data.errcode === 0) {
          this.$Message.success('处置成功')
          this.chuzhiShow = false
          this.findTable()
        } else {
          this.$Message.error({
            content: '操作失败,\n' + res.data.errmsg
          })
        }
      })
    }
  },
  mounted () {
    this.findTable()
    this.severUserInfo = this.$store.state.user.severUserInfo
  }
}
</script>

<style scoped>
/deep/.ivu-table-fixed-body{
  background: white;
}
/deep/.ivu-table:after, .ivu-table:before{
  background-color: transparent!important;
}
>>>.ivu-table:after, .ivu-table:before{
  background-color: transparent!important;
}
.page_style{
  margin-top: 10px;
}
.input-card .btn {
  margin-right: 1.2rem;
  width: 9rem;
}
.demo-spin-container{
  display: inline-block;
  width: 100%;
  /*//height: 400px;*/
  position: relative;
  /*//border: 1px solid #eee;*/
}
.opt-area-02 {
  display: flex;
  align-items: center;
  flex-direction: column;
  border: 1px solid #abdcff;
  background-color: #f0faff;
  padding: 8px 16px 8px 16px;
  border-radius: 4px;
  margin-bottom: 10px;
}
.input-frame {
  width: 120px;
  margin-right: 10px;
  float: left;
}
.opt-area-02 .left-con {
  font-size: 14px;
  width: 100%;
}

.opt-area-02 .left-con span {
  font-weight: bold;
}
.actionBtn {
  margin-top: 5px;
  margin-left: 5px;
}
</style>
